<template>
  <div class="page">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="18">
            <ul>
              <li v-for="item in res" :key="item.id">
                <h2 class="title">{{ item.title }}</h2>
                <p class="kuang">
                  <span
                    >项目：<small>{{ item.com }}</small></span
                  ><span>作者：{{ item.author }}</span
                  ><span>发布时间：{{ item.time }}</span
                  ><span>阅读：{{ item.see }}</span>
                </p>
                <p class="left">{{ item.p1 }}</p>
                <p class="left">{{ item.p2 }}</p>
              </li>
              <div class="bottom">
                <span
                  >上一篇：
                  <router-link to=""><small class="zz">无</small></router-link>
                </span>
                <span
                  >下一篇：
                  <router-link to=""
                    ><small class="down"
                      >最涨薪的PHP项目微信公众平台开发</small
                    ></router-link
                  ></span
                >
              </div>
            </ul>
          </el-col>
          <el-col :span="6">
            <Content />
            <History />
            <Hot />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <Footer />
  </div>
</template>

<script>
let resData = [
  {
    id: "1",
    title: "这是第一篇文章",
    com: "PHP",
    author: "传智播客",
    time: "05-31 14:50:07",
    see: "15次",
    p1: "欢迎使用PHP内容管理系统",
    p2: "这是一篇系统自动生成的文章，您可以修改或删除。",
  },
];

import Hot from "@/components/Hot.vue";
import Content from "@/components/Content.vue";
import History from "@/components/History.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Page",
  components: {
    Hot,
    Content,
    History,
    Footer,
  },
  data() {
    return {
      res: resData,
    };
  },
};
</script>

<style scoped>
ul {
  background: white;
  padding: 15px 40px;
}
li {
  list-style-type: none;
  border-bottom: 1px solid rgb(204, 202, 202);
}
.border {
  border-bottom: 1px solid rgba(204, 202, 202);
  padding-bottom: 10px;
}
.left {
  text-align: left;
}
span {
  font-size: 14px;
  display: inline-block;
  padding: 0px 0px 0px 10px;
}
small {
  color: rgb(13, 153, 153);
}

.title {
  text-align: center;
  font-size: 30px;
}
.kuang {
  text-align: center;
}
.bottom {
  text-align: center;
  padding: 12px;
}
a {
  text-decoration: none;
}
.zz {
  color: #000;
  font-size: 15px;
}
.kk {
  color: rgb(10, 119, 119);
  font-size: 16px;
}
</style>